<template>
	<yb-page allowScroll :style="{'background-color': skinColor.color_bg_1}">
		<view class="yb-flex nav-bar-box" :style="{
			'background-color': skinColor.color_bg_1,
			'border-bottom-color': skinColor.color_gap_1
		}">
			<yb-status-bar color="rgba(0,0,0,.5)"></yb-status-bar>
			<view class="nav-bar yb-flex yb-row yb-align-center padding-gap">
				<yb-tap @click="app.$Router.back()">
					<yb-icon name="angle-arrow-left" :color="skinColor.color_1" :size="40"></yb-icon>
				</yb-tap>
				<view class="yb-flex yb-row yb-align-center yb-flex-1" style="margin-left: 20rpx;">
					<view class="yb-flex yb-row yb-align-center" @tap="showTopCharacter">
						<template v-if="params && params.characters.length > 1">
							<view class="characters yb-flex yb-row yb-justify-center yb-align-center">
								<view class="character-avatar" elevation="2" v-for="(character, i) in characters.slice(0, 3)" :key="i">
									<yb-avatar :src="character.avatar || app.$business.filterSource(params.source).logo || '/static/logo.png'" size="60"></yb-avatar>
								</view>
							</view>
						</template>
						<template v-else>
							<yb-avatar :src="params.avatar || app.$business.filterSource(params.source).logo" size="60"></yb-avatar>
							<yb-text custom-style="margin-left:10rpx" :lines="1" :size="24" :color="skinColor.color_1" :max="10" ellipsis :value="params.creator || app.$business.filterSource(params.source).title"></yb-text>
						</template>
					</view>
					<yb-tap @click="app.$business.toCollection(params)" custom-style="margin-left: 20rpx;">
						<yb-tag plain :value="app.$business.isCollection(params.id) ? '已收藏' : '收藏'" :options="{
							'bgColor': app.$business.isCollection(params.id) ? skinColor.color_3 : skinColor.color_blue,
							'radius': 30,
							'size': 20
						}"></yb-tag>
					</yb-tap>
					<yb-tap @click="jumpPage" custom-style="margin-left: 20rpx;">
						<yb-tag plain value="跳转" :options="{
							'bgColor': skinColor.color_red,
							'radius': 30,
							'size': 20
						}"></yb-tag>
					</yb-tap>
				</view>
				<yb-tap @click="onSearchClick">
					<rd-icon name="search" :color="skinColor.color_1" :size="45"></rd-icon>
				</yb-tap>
				<yb-tap custom-style="margin-left: 15rpx" @click="app.$business.showRecome(params)">
					<rd-icon name="recome-circle" :color="skinColor.color_1" :size="46"></rd-icon>
				</yb-tap>
				<yb-tap custom-style="margin-left: 15rpx" @click="app.$business.shareWeb(params)">
					<rd-icon name="share-rect" :color="skinColor.color_1" :size="40"></rd-icon>
				</yb-tap>
			</view>
		</view>
		<view class="yb-flex">
			<yb-status-bar></yb-status-bar>
			<yb-gap :size="100"></yb-gap>
		</view>
		<community-list
		ref="list"
		type="page"
		pulldown
		:list="list"
		:empty="list.length == 0"
		:loading="loading"
		:loadmore="list.length > 0"
		@pulldown="onPulldown"
		@loadmore="onLoadmore"
		@characterClick="showCharacter"
		v-if="params">
			<yb-list-item>
				<view class="padding-gap yb-flex">
					<yb-gap></yb-gap>
					<yb-text weight="bold" :size="30" :lines="2" :color="skinColor.color_1" :value="params.title" v-if="params.title"></yb-text>
					<view class="subtitle yb-flex yb-row yb-wrap yb-align-center">
						<view class="yb-flex yb-row" style="margin-right: 30rpx;">
							<yb-tag :options="{
								bgColor: app.$business.getColor(params.type),
								size: 20
							}" :value="app.$business.getType(params.type)"></yb-tag>
							<yb-tag custom-style="margin-left: 10rpx" :options="{
								bgColor: skinColor.color_red,
								size: 20
							}" :value="app.$business.filterSource(params.source).title"></yb-tag>
						</view>
						<view class="yb-flex yb-row yb-align-center">
							<rd-icon name="record" :color="skinColor.color_3" size="22"></rd-icon>
							<text class="text" :style="{color: skinColor.color_3}">{{params.updateTime || params.createTime}}</text>
						</view>
					</view>
					<yb-text custom-style="margin-top: 20rpx" v-if="params.style" :size="26" :lines="1" :color="skinColor.color_3" :value="'类型：' + params.style"></yb-text>
					<yb-text :custom-style="{
						'margin-top': params.style ? '10rpx' : '20rpx'
					}" v-if="params.desc" :size="26" :color="skinColor.color_3" :value="params.desc"></yb-text>
					<view class="yb-flex yb-row yb-align-center" style="margin-top: 20rpx;">
						<view class="tip yb-flex yb-row yb-align-center">
							<yb-icon name="eye-on" size="30" :color="skinColor.color_3"></yb-icon>
							<text class="tip-text" :style="{color: skinColor.color_3}">{{app.$utils.numtounit(params.readnum)}}</text>
						</view>
						<view class="tip-gap" :style="{'background-color': skinColor.color_3}"></view>
						<view class="tip yb-flex yb-row yb-align-center">
							<rd-icon name="fire" size="30" :color="skinColor.color_3"></rd-icon>
							<text class="tip-text" :style="{color: skinColor.color_3}">{{app.$utils.numtounit(params.popular)}}</text>
						</view>
						<view class="tip-gap" :style="{'background-color': skinColor.color_3}"></view>
						<view class="tip yb-flex yb-row yb-align-center">
							<rd-icon name="thumbs" size="30" :color="skinColor.color_3"></rd-icon>
							<text class="tip-text" :style="{color: skinColor.color_3}">{{app.$utils.numtounit(params.thumbs)}}</text>
						</view>
						<view class="tip-gap" :style="{'background-color': skinColor.color_3}"></view>
						<view class="tip yb-flex yb-row yb-align-center">
							<rd-icon name="comment" size="30" :color="skinColor.color_3"></rd-icon>
							<text class="tip-text" :style="{color: skinColor.color_3}">{{app.$utils.numtounit(params.comment)}}</text>
						</view>
						<view class="tip-gap" :style="{'background-color': skinColor.color_3}"></view>
						<view class="tip yb-flex yb-row yb-align-center">
							<rd-icon name="love" size="30" :color="skinColor.color_3"></rd-icon>
							<text class="tip-text" :style="{color: skinColor.color_3}">{{app.$utils.numtounit(params.collect)}}</text>
						</view>
					</view>
					<view class="tags yb-flex yb-row yb-wrap" v-if="params && params.tag.length > 0">
						<view @click="app.$business.showTaglist(tag, params.type)" v-for="(tag, i) in params.tag" :key="i">
							<yb-tag :options="{
								bgColor: skinColor.color_3,
								color: skinColor.color_white
							}" custom-class="tag" :value="tag"></yb-tag>
						</view>
					</view>
					<view class="line-border" :style="{'background-color': skinColor.color_gap_1, 'margin-top': '20rpx'}"></view>
				</view>
			</yb-list-item>
		</community-list>
		<rd-characters :visible.sync="characterShow" :list="characters_single"></rd-characters>
		<yb-dialog ref="dialog"></yb-dialog>
		<yb-action-sheet ref="actionSheet"></yb-action-sheet>
	</yb-page>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	import CommunityList from "./list.vue"
	export default {
		mixins: [appMixin],
		components: {
			CommunityList
		},
		data () {
			return {
				loading: true,
				params: '',
				list: [],
				paging: {},
				characterShow: false,
				characters_single: [],
				currentPage: 1
			}
		},
		onReady() {
			this.params = JSON.parse(decodeURIComponent(getApp().globalData.$Route.query.params))
			this.$nextTick(function () {
				setTimeout(() => {
					let index = this.$store.getters['record/get'].findIndex(record => record.id == this.params.id)
					this.currentPage = index > -1 ? this.$store.getters['record/get'][index].record.currentPage : 1
					this.onPulldown()
				}, 500)
			})
		},
		methods: {
			jumpPage () {
				this.$refs.dialog.prompt({
					title: {
						color: this.skinColor.color_1,
						text: '跳转页码（仅支持以页码跳转的源）'
					},
					value: this.currentPage,
					type: 'number',
					test: '^([1-9][0-9]*){1,3}$',
					required: true,
					error: '请输入非零的正整数',
					placeholder: '请输入页数',
					options: {
						bgColor: this.skinColor.color_bg_2
					},
					success: ret => {
						if ( ret.confirm ) {
							this.currentPage = parseInt(ret.form[0].value)
							this.loading = true
							this.list = []
							this.$nextTick(function () {
								this.onPulldown()
							})
						}
					}
				})
			},
			showTopCharacter () {
				if ( this.list.length > 0 ) this.showCharacter(this.list[0])
			},
			showCharacter (item) {
				this.characters_single = item.characters
				this.characterShow = true
			},
			onPulldown (callback) {
				this.currentPage = callback ? 1 : this.currentPage
				this.paging = {}
				this.$refs.list.resetLoadmore()
				this.app.$api.getSingleDetail(this.params).then(res => {
					let oldParams = JSON.parse(JSON.stringify(this.params))
					this.params = ''
					this.$nextTick(function () {
						if ( res.code == this.app.$config.ERR_OK ) {
							this.params = Object.assign({}, oldParams, res.data.data || {})
							let tag = this.app.$business.getTag(this.params)
							this.params.tag = [...new Set(this.params.tag.concat(tag))]
						}
						this.list = this.params.list
						if ( !this.params.shareUrl ) this.params.shareUrl = res.requestUrl
						if ( this.params.isPay ) {
							this.loading = false
							this.$refs.dialog.alert({
								title: {
									color: this.skinColor.color_1,
									text: '提示'
								},
								content: {
									color: this.skinColor.color_red,
									text: '付费资源！请支持正版'
								},
								options: {
									bgColor: this.skinColor.color_bg_2,
									type: 2
								}
							})
							callback && callback('fail')
							this.$refs.list.setLoadmoreEnd()
						} else {
							this.app.$api.getSectionDetail(Object.assign({}, this.params, {
								paging: this.paging,
								currentPage: this.currentPage
							})).then(res => {
								this.loading = false
								if ( res.code == this.app.$config.ERR_OK ) {
									callback && callback('success')
									this.list = res.data.list
									this.paging = res.data.paging || {}
									if ( res.data.isLastPage ) this.$refs.list.setLoadmoreEnd()
									if ( this.$store.getters['app/getFootmark'] ) {
										this.$store.dispatch('record/add', Object.assign({}, this.params, {
											record: {
												currentPage: this.currentPage
											}
										}))
									}
								} else {
									callback && callback('fail')
								}
							})
						}
					})
				})
			},
			onLoadmore (callback) {
				this.currentPage++
				this.app.$api.getSectionDetail(Object.assign({}, this.params, {
					paging: this.paging,
					currentPage: this.currentPage
				})).then(res => {
					if ( res.code == this.app.$config.ERR_OK ) {
						this.paging = res.data.paging || {}
						this.list = this.list.concat(res.data.list)
						if ( res.data.isLastPage ) {
							callback('end')
						} else {
							callback('success')
						}
						if ( this.$store.getters['app/getFootmark'] ) {
							this.$store.dispatch('record/add', Object.assign({}, this.params, {
								record: {
									currentPage: this.currentPage
								}
							}))
						}
					} else {
						callback('fail')
					}
				})
			}
		}
	}
</script>

<style>
	.nav-bar-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		border-bottom-width: 2px;
		border-bottom-style: solid;
		z-index: 2;
	}
	.nav-bar {
		height: 100rpx;
	}
	.characters .character-avatar {
		border-radius: 45rpx;
	}
	.tip-gap {
		width: 1px;
		height: 26rpx;
		margin: 0 15rpx;
	}
	.tip-text {
		font-size: 26rpx;
		margin-left: 5rpx;
	}
	.line-border {
		height: 1px;
	}
	.tags {
		margin-top: 20rpx;
	}
	.tags .tag {
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
	.subtitle {
		margin-top: 20rpx;
	}
	.subtitle .text {
		font-size: 20rpx;
		margin-left: 5rpx;
	}
</style>
